<template>
	<view class="container" @tap="Playbjmusic">
		<view class="hader">
			<view class="hader_tit">
				<!-- <mumu-music class="disk" musicSrc='../../static/mp3/暗号.mp3'></mumu-music> -->
				<view class="music" v-show="isPlaying==false" @tap="togglePlay"></view>
				<view class="music1" v-show="isPlaying==true" @tap="togglePlay"></view>
				<view class="GoldCoins" v-show="gold_coin !== ''">Game Coins：{{ gold_coin }}</view>
				<view class="GoldCoins" v-show="gold_coin === ''" @tap="tomy">Not log in</view>
			</view>
			<!-- <image class="img" src="../../static/images/幸运大抽奖.png"></image> -->
			<view class="hader_tabbar">
				<v-tabs 
					v-model="current" 
					:tabs="tabs" 
					field="type_name"
					:pills="true" 
					line-height="0" 
					activeColor="#fff" 
					bgColor="gradient(90deg, rgba(255, 141, 26, 0) 0%, rgba(229, 229, 229, 0.4) 50%, rgba(255, 141, 26, 0) 100%);" 
					@change="changeTab"
					color="rgb(255, 255, 255)" 
					fontSize="28rpx" 
					pillsColor="rgba(250, 226, 151, 1)" 
					height="80rpx" 
					lineRadius="20rpx" 
					pillsBorderRadius="40rpx"
					:activeColor="activeColor" 
					:zIndex="zindex" 																																
					:lineScale="lineScale"
					paddingItem='0 24rpx'>
				</v-tabs>
			</view>
		</view>
		<view class="mains">
			<view class="winningaprize">
				<liu-notice-bar :dataList="run" color="rgba(249, 223, 131, 1)" :fontSize="pmdsize" :interval="3000"></liu-notice-bar>
			</view>
			<view class="ninegrid">
				<view class="clickblock">
					<view class="clickblockitem" v-for="(item,index) in 9" @tap="openDetailedPrizes(index)"></view>
				</view>
				<!-- 九宫格抽奖 -->
				<LuckyGrid 
					ref="myLucky"
					width="590rpx"
					height="590rpx"
					rows=3
					cols=3
					:blocks="blocks"
					:prizes="prizes"
					:default-config="defaultConfig"
					:active-style="activeStyle"
					@start="startCallBack" 
					@end="endCallBack"
					/>
			</view>
			<!-- :defaultStyle="defaultStyle" -->
			<view class="buttom" @tap="onluckDraw">	
				<view class="name">Start</view>
				<view class="text">
					<image class="img" src="../../static/images/gold.png"></image>
					<view class="text1">{{LotteryAmount}}</view> 
				</view>
			</view>
			<view class="explain" @tap="rulepopupopen">Rule Description</view>
		</view>
		<view class="UserAgreement">
			<view class="title">昆山艺苒蔚莱网络科技有限公司  All right reserved</view>
			<view class="skip" @tap="toysyy">《Privacy Policy》</view>
		</view>
		<!-- <view class="CompanyLabeling">昆山艺苒蔚莱网络科技有限公司  版权所有</view> -->
		<!-- 中奖弹框 -->
		<uni-popup ref="Winningpopup">
			<view class="Winningpopup">
				<image class="treasureChest" src="../../static/images/宝箱.png"></image>
				<image class="plaque" src="../../static/images/牌匾.png"></image>
				<view class="title">Have won a prize</view>
				<image class="prize" :src="Winningjackpot.goods_img"></image>
				<view class="name">{{ Winningjackpot.english_desc }}</view>
				<view class="accept" @tap="closeWinningpopup">Accept the prize</view>
				<image class="close" @tap="closeWinningpopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 金币不足 -->
		<uni-popup ref="insufficientpopup">
			<view class="insufficientpopup">
				<view class="plaque">Gold shortage</view>
				<view class="title">Gold coin recharge</view>
				<view class="product">
					<view :class="item.id == defaultid.id?'product_item active':'product_item'" v-for="(item,index) in productlist" :key="index" @tap="changechoice(item)">
						<view class="GoldCoins">
							<image class="gold" src="../../static/images/gold.png"></image>
							<view class="goldtext">{{ item.gold_coin }}</view>
						</view>
						<view class="money">${{ item.new_money/100 }}</view>
					</view>
				</view>
				<!-- <view class="title">Select payment method</view>
				<view class="payuse">
					<view class="payitem">
						<image class="paypol" src="../../static/images/paypal.png"></image>
						<image class="defa" src="../../static/images/xuanzhong.png"></image>
					</view>
				</view> -->
				<view class="accept" @tap="topay">Buy</view>
				<image class="close" @tap="closeinsufficientpopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 规则 -->
		<uni-popup ref="rulepopup">
			<view class="rulepopup">
				<view class="plaque">Rule Description</view>
				<view class="scllow">
					<view class="RuleSubclass">Please login and purchase game coins before the draw begins;</view>
					<view class="RuleSubclass">A: How do I draw the prize?</view>
					<view class="RuleSubclass">1, Select the prize type at the top of the home page, click the draw button below, you can play the draw game, and consume the balance of the game currency in the account;</view>
					<view class="RuleSubclass">2, Draw 100% of the prize to get goods, the obtained goods can be viewed in the "winning record";</view>
					<view class="RuleSubclass">3, the obtained goods can choose the address and wait for express delivery;</view>
					<view class="RuleSubclass">B: About redemption of prizes?</view>
					<view class="RuleSubclass">1. For the goods you do not want, you can click "Exchange" game currency in "Winning Record", and the exchanged game currency will be automatically recharged into your account. Once the exchange is successful, it cannot be cancelled;</view>
					<view class="RuleSubclass"> One: How to draw the prize?</view>
					<view class="RuleSubclass">1, Select the prize type at the top of the home page, click the draw button below, you can play the draw game, and consume the balance of the game currency in the account;</view>
					<view class="RuleSubclass">2, Draw 100% of the prize to get goods, the obtained goods can be viewed in the "winning record";</view>
					<view class="RuleSubclass">3, the obtained goods can choose the address and wait for express delivery;</view>
					<view class="RuleSubclass">Two: About the redemption of prizes?</view>
					<view class="RuleSubclass">1. For the goods you do not want, you can click "Exchange" game currency in "Winning Record", and the exchanged game currency will be automatically recharged into your account. Once the exchange is successful, it cannot be cancelled;</view>
				</view>
				<image class="close" @tap="closerulepopup" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
		<!-- 奖品详情 -->
		<uni-popup ref="DetailedPrizes">
			<view class="DetailedPrizes">
				<view class="plaque">Prize details</view>
				<swiper class="swiper" circular :indicator-dots="false" @change="swiperchange" :current="swipercurrent" :autoplay="false" :interval="3000"
				:duration="500">
					<swiper-item v-for="(item,index) in prizes">
						<view class="name">{{ item.fonts[0].text }}</view>
						<image class="img" :src="item.imgs[0].src"></image>
						<view class="text">{{ item.fonts[0].english_desc }}</view>
						<view class="money">Reference Price：<span class="span1">${{ item.fonts[0].goods_price }}</span></view>
					</swiper-item>
				</swiper>
				<view class="zuo"><image class="img1" @tap="swipertleft" src="../../static/images/向左滑动.png"></image></view>
				<view class="you"><image class="img1" @tap="swipertright" src="../../static/images/向右滑动.png"></image></view>
				<image class="close" @tap="closeDetailedPrizes" src="../../static/images/close2.png"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
  import LuckyGrid   from '../../components/@lucky-canvas/uni/lucky-grid'
  import mumuMusic from '@/uni_modules/mumu-music/components/mumu-music/mumu-music.vue'
  import { getrequest, postrequest, EventStatistics } from '../../util/api'	
  import {showDialog,closeDialog} from '../../util/dialog'
  export default {   
		// 注册组件
		components: { LuckyGrid , mumuMusic  },
		data() { 
			return {
				link:'',
				ispay:false, //防重复点击
				defaultid:{}, //选中的产品
				productlist:[], //产品
				bjmusicswith:false, // 控制背景音乐初次进入的开关
				Inlottery:false, //是否禁用抽奖
				tittypeid:'', //选中的列表的id
				Winningjackpot:{}, //中奖的对象
				PrizePool:[], // 奖品池
				gold_coin:'', //我的金币余额
				LotteryAmount:'', //抽奖需要的金额
				channel_no:'', //渠道号
				token:'', //登录token
				// tab相关配置
				current: 0, //列表下标是第几
				zindex:99, 
				lineScale:0.5,
				activeColor:'rgba(161, 51, 51, 1)',
				tabs: [],
				// 转盘相关数据
				blocks: [{ borderRadius:'30rpx', background: 'rgb(174,34,61)',padding:'6rpx'}],
				// 数据
				prizes: [
					{	x:0, y:0, fonts: [{ text: 'Loading...', top:'85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1}],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background:'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
					{	x:1, y:0, fonts: [{ text: 'Loading...', top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
					{	x:2, y:0, fonts: [{ text: 'Loading...',top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
					{	x:0, y:1, fonts: [{ text: 'Loading...',top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
					{	x:1, y:1, fonts: [{ text: 'Loading...',top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
					{	x:2, y:1, fonts: [{ text: 'Loading...',top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
					{	x:0, y:2, fonts: [{ text: 'Loading...', top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',}, 
					{	x:1, y:2, fonts: [{ text: 'Loading...',top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
					{	x:2, y:2, fonts: [{ text: 'Loading...',top: '85%',fontColor:'rgba(243, 48, 48, 1)',fontSize:"18rpx",fontWeight:'600',wordWrap:false,lineClamp:1, }],imgs:[{src:'https://h5.uubox.one/images/moren.png',top:'5%', width:'150rpx',height:'150rpx',}], background: 'rgba(255, 251, 230, 1)',borderRadius:'20rpx',},
				],	
				// 默认配置
				defaultConfig:{
					gutter:'6rpx',
					speed:'16',
					accelerationTime:'1200',
					decelerationTime:'1700',
				},
				// 中奖标记样式
				activeStyle:{
					fontColor:'rgba(255, 251, 230, 1)',
					background:"rgba(255, 117, 117, 1)",
				},
				// 音乐相关配置
				isPlaying: false,
				music: uni.createInnerAudioContext(),
				musictwo: uni.createInnerAudioContext(),

				// 跑马灯
				run:[],
				pmdsize:26,
				// 轮播图
				swipercurrent:0,//   轮播图的下标
			}
		},
		onLoad(option){
			console.log('onLoad',option)
			// 获取渠道号
			this.channel_no = uni.getStorageSync('channel_no') || ''
			// 如果本地缓存获取不到渠道号并且链接上带的有渠道号
			if(!this.channel_no&&option.channel_no){
				this.channel_no = option.channel_no
				this.link = window.location.href
				uni.setStorageSync('channel_no',option.channel_no)
				uni.setStorageSync('href',window.location.href)
			}
			// 判断是不是授权登录带回来的token
			if(option.token){
				uni.setStorageSync('token',option.token)
			}
			this.link = uni.getStorageSync('href') || ''
			// 请求抽奖title类型
			this.getLotteryType()
			// 请求用户数据
			this.getuserDetails()
			//请求跑马灯接口
			this.getrun()
			// 事件统计
			EventStatistics('首页 ','访问数')
		},
		onShow(){
			// 请求用户数据
			// this.getuserDetails()
		},
		onReady(){
			this.token = uni.getStorageSync('token') ||''
			if(!this.token){
				// 弹出登录弹框
				showDialog(
				// 	() => {
				// 	// 请求用户详情
				// 	this.getuserDetails()
				// }
				)
			}else{
				// 请求用户详情
				 this.getuserDetails()
			}
			setTimeout(()=>{
				// 播放背景音乐
				// this.togglePlay()
			},1000)

		},
		// 页面隐藏
		onHide(){
			console.log('页面隐藏',)
			// 关闭背景音乐
			if(this.music._stoping == false){
				this.music.stop();
			}
			this.isPlaying = false;
			// 背景音乐阀门重置
			// this.bjmusicswith = false
			// 关闭所有弹框
			this.closeWinningpopup()
			this.closeinsufficientpopup()
			this.closerulepopup()
			this.closeDetailedPrizes()
		},
		methods: {
			// 进入首页点击播放背景音乐
			Playbjmusic(){
				if(this.bjmusicswith){
					return
				}
				this.bjmusicswith = true
				// 打开音乐
				this.togglePlay()
			},
			// 点击播放背景音乐
			togglePlay() {
				if (this.isPlaying) {
					this.music.stop();
					this.isPlaying = false;
				} else {
					this.music.src = '../../static/mp3/背景音乐.mp3'; // 替换成你的音乐文件路径
					this.music.volume = 0.3
					this.music.loop = true
					// this.music.autoplay = true
					this.music.play();
					this.isPlaying = true;
				}
				console.log('this.music',this.music)
			},
			// 未登录跳转到我的页面
			tomy(){
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			// 上方的tab选中的回调
			changeTab(clickindex) {
				console.log('当前选中索引：' + clickindex)
				this.tabs.forEach((item,index)=>{
					if(index == clickindex){
						this.LotteryAmount = item.cost_gold
						this.getprize(item.id)
						// 初始化转盘
						this.$refs.myLucky.init()
					}
				})
				// 弹出登录弹框弹框
				if(!this.token){
					showDialog()
				}
			},
			// 请求奖品
			async getprize (id) {
				this.tittypeid = id
				let params = {
					type_id:id,
				}
				const res = await getrequest('/api/prize/prize_list',params)
				console.log('请求奖品',res)
				if( res &&res.code == 200){
					res.data.forEach((item1,index) =>{
						this.prizes[index].fonts[0].text = item1.goods_name
						this.prizes[index].fonts[0].id = item1.id
						this.prizes[index].fonts[0].title = item1.title
						this.prizes[index].fonts[0].goods_price = item1.goods_price
						this.prizes[index].fonts[0].english_desc = item1.english_desc
						this.prizes[index].imgs[0].src = item1.goods_img
					})
				}
			},
			// 请求抽奖类型
			async getLotteryType(){
				let params = {}
				const res = await getrequest('/api/prize/type_list',params)
				console.log('请求抽奖类型',res)
				if( res &&res.code == 200){
					this.tabs = res.data
					this.tabs.forEach((item,index) => {
						if(item.default_select == 1){
							// 选中的下标赋值
							this.current = index
							console.log('选中的是第几个',this.current)
							this.tittypeid = item.id
							this.LotteryAmount = item.cost_gold
							this.PrizePool = item.prize_list
							console.log('item.prize_list',item.prize_list)
							item.prize_list.forEach((item1,index) =>{
							 	this.prizes[index].fonts[0].text = item1.goods_name
								this.prizes[index].fonts[0].id = item1.id
								this.prizes[index].fonts[0].title = item1.title
								this.prizes[index].fonts[0].goods_price = item1.goods_price
								this.prizes[index].fonts[0].english_desc = item1.english_desc
								this.prizes[index].imgs[0].src = item1.goods_img
							})
						}
					});
				}
			},
			// 请求用户数据
			async getuserDetails(){
				let params = {}
				const res = await getrequest('/api/user/user_info',params)
				console.log('用户信息',res)
				if( res &&res.code == 200){
					this.gold_coin = res.data.gold_coin
					console.log('我的金币',this.gold_coin)
				}
			},
			// 跳转到购买金币弹框
			topayjb(){
				// 关闭金币弹框
				this.closeinsufficientpopup()
				uni.navigateTo({
					url:'/pages/payvip/payvip'
				})
			},	
			// luckDraw(){
				// if(this.LotteryAmount > this.gold_coin){
				// 	uni.showToast({
				// 		title:'金币不足',
				// 		icon:'none'
				// 	})	
				// 	return
				// }
			// },
			// 点击抽奖
			async onluckDraw(){
				// 弹出登录弹框弹框
				if(!this.token){
					showDialog()
				}
				if(this.Inlottery){
					return
				}
				// 禁止调用抽奖
				this.Inlottery = true

				let params = {
					type_id: this.tittypeid
				}
				const res = await postrequest('/api/prize/prize_draw',params)
				console.log('请求奖品',res)
				if(res &&res.code == 200){
					this.Winningjackpot = res.data
					// 开始转盘
					this.$refs.myLucky.play()
					// 接口返回成功开启结束
					this.StartLottery()
					// 事件统计
					EventStatistics('首页','开始抽奖')
				}else if(res &&res.code == 0){
					// 弹出购买金币弹框
					this.insufficientpopupopen()
					// 接口返回失败解开禁用状态
					this.Inlottery = false
					// 停止转动初始化抽奖
					this.$refs.myLucky.init()
				}else{
					// 接口返回失败解开禁用状态
					this.Inlottery = false
					// 停止转动初始化抽奖
					this.$refs.myLucky.init()
				}
			},
			// 点击开始抽奖
			StartLottery (){
				 // 选中的下标
				let jackpotindex = ''
				this.gold_coin = Number(this.gold_coin) - Number(this.LotteryAmount)
				// 请求用户信息接口
				// this.getuserDetails()
				this.prizes.filter((item,index)=>{
					if(item.fonts[0].id == this.Winningjackpot.id){
						jackpotindex = index
						console.log('jackpotindex',index)
					}
				})
				// 使用定时器模拟接口
				setTimeout(() => {
					// 结束游戏
					this.$refs.myLucky.stop(jackpotindex)
				}, 3300)
				// 打开中奖弹框
				setTimeout(() => {
					this.Winningpopupopen()
					// 打开中奖音乐
					this.musictwo.src = '../../static/mp3/奖励弹出音效.mp3'; // 替换成你的音乐文件路径
					this.musictwo.play();
					// 接口返回失败解开禁用状态
					this.Inlottery = false
				}, 7000)

				// 关闭中奖音乐
				setTimeout(() => {
					// 关闭中奖音乐
					this.musictwo.stop();
				}, 3000)
			},
			// 请求产品
			async getproduct(){
				let params = {
					channel_no:this.channel_no,
				}
				const res = await getrequest('/api/product/list',params)
				console.log('产品',res)
				if( res &&res.code == 200){
					this.productlist = res.data
					this.defaultid = this.productlist[0]
				}
			},
			// 改变选中的产品
			changechoice(item){
				this.defaultid = item
			},
			// 点击支付
			async topay(){
				// 防重复点击
				if(this.ispay){
					return
				}
				// 事件统计
				EventStatistics('首页','金币弹窗购买按钮')

				this.ispay = true
				// 处理一下穿过去的首页链接
				const url = uni.getStorageSync('href')
				const htmlIndex = url.indexOf('.html');
				// 如果找到了 .html，则截取之前的部分，否则保持原样
				const newUrl = htmlIndex !== -1 ? url.slice(0, htmlIndex + 5) : url;
				const processedUrl = newUrl + '#/pages/result/result'
				// const backcideoUrl = newUrl + '#/pages/play/play?videoId=' + this.videoId 
				// uni.setStorageSync('backcideoUrl',backcideoUrl)
				uni.showToast({
					title: 'In payment...',
					icon: 'none',
					//显示持续时间为 2秒
					duration: 2000 
				})
				let params = {
					product_id:this.defaultid.id,
					pay_type:'STRIPE',
					return_url:processedUrl,
					channel_no:this.channel_no,
					link:this.link,
					// sub_channel_no: this.sub_channel_no,
				}
		        const res = await postrequest('/api/order/create',params)
				console.log('创建订单',res)
				this.closeinsufficientpopup()
				if(res&&res.code == 200){
					// 关闭弹框
					this.closeinsufficientpopup()
					this.timer = setTimeout(()=>{
						this.ispay = false
					},3000)
					
					// 跳转
					window.location.href = res.data.payUrl
				}
			},

			// 点击抽奖按钮触发回调
			// startCallBack (e) {
			// 	console.log('点击抽奖按钮触发回调',e)
			// 	// 先开始旋转
			// 	// this.$refs.myLucky.play()
			// 	// // 使用定时器来模拟请求接口
			// 	// setTimeout(() => {
			// 	// // 调用stop停止旋转并传递中奖索引
			// 	// this.$refs.myLucky.stop(7)
			// 	// }, 3000)
			// },
			// 抽奖结束触发回调
			endCallBack (prize) {
				// 奖品详情
				console.log('抽奖结束触发回调',prize)
			},
			// 中奖弹框
			Winningpopupopen(){
				// 事件统计
				EventStatistics('首页--中奖弹窗', this.Winningjackpot.goods_name)
				this.$refs.Winningpopup.open('center')
			},
			closeWinningpopup(){
				this.$refs.Winningpopup.close()
			},
			// 金币不足
			insufficientpopupopen(){
				// 事件统计
				EventStatistics('首页','金币不足弹框')
				// 请求产品
				this.getproduct()
				this.$refs.insufficientpopup.open('center')
			},
			closeinsufficientpopup(){
				this.$refs.insufficientpopup.close()
			},
			// 规则弹框
			rulepopupopen(){
				// 事件统计
				EventStatistics('首页','规则说明')
				this.$refs.rulepopup.open('center')
			},
			closerulepopup(){
				this.$refs.rulepopup.close()
			},
			// 详情弹框
			openDetailedPrizes(index){
				console.log('点击的是哪个子',index)
				this.swipercurrent = index
				// 事件统计
				EventStatistics('首页','查看商品详情')
				this.$refs.DetailedPrizes.open('center')
			},
			closeDetailedPrizes(){
				this.$refs.DetailedPrizes.close()
			},

			// 点击切换轮播图
			swipertleft(){
				if(this.swipercurrent == 0){
					console.log('最后一个轮播图',this.prizes.length)
					this.swipercurrent = this.prizes.length - 1
				}else{
					
					this.swipercurrent = this.swipercurrent - 1
				}
				console.log('this.lbcurrent',this.swipercurrent)
			},
			swipertright(){
				if(this.swipercurrent == (this.prizes.length - 1)){
					console.log('最后一个轮播图')
					this.swipercurrent = 0
				}else{
			
					this.swipercurrent = this.swipercurrent + 1
				}
				console.log('this.lbcurrent',this.swipercurrent)
			},
			// 轮播图改变
			swiperchange(e){
				console.log('gaibian',e.detail.current)
				this.swipercurrent = e.detail.current
			},
			// 跑马灯数据接口请求
			async getrun(){
				let params = {}
				const res = await getrequest('/api/prize/horse_race_lamp',params)
				console.log('中奖跑马灯',res)
				if( res &&res.code == 200){
					res.data.forEach((item,index)=>{
						const obj = {
							index:index,
							titile:item,
						}
						this.run.push(obj)
					})
				}
			},
			// 跳转到隐私协议
			toysyy(){
				window.location.href = 'https://blind-box-h5.ksbmtb.com/XY/googleagreement.html'
			},
			// // 邮箱
			// openemailPopup() {
			// 	this.$refs.MailPopup.open()
			// },
			// closeemailPopup() {
			// 	this.$refs.MailPopup.close()
			// },
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background: url('../../static/images/bj.png') no-repeat;
		background-size: 100% 100%;
		.hader{
			width: 750rpx;
			// height: 100rpx;
			padding-top: 30rpx;
			margin: 0 auto;
			.hader_tit{
				width: 750rpx;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				.music{
					width: 50rpx;
					height: 50rpx;
					background: url('../../static/images/music.png');
					background-size: 100% 100%;
					margin-left: 30rpx;
				}
				.music1{
					width: 50rpx;
					height: 50rpx;
					background: url('../../static/images/music1.png');
					background-size: 100% 100%;
					margin-left: 30rpx;
					animation: rotate 5s linear infinite; /* 使用CSS动画控制旋转 */
				}
				@keyframes rotate {
					from {
						transform: rotate(0deg);
					}
					to {
						transform: rotate(360deg);
					}
				}
				.GoldCoins{
					// width: 280rpx;
					height: 50rpx;
					border-radius: 20px 0px 0px 20px;
					background: linear-gradient(90deg, rgba(255, 141, 26, 1) 0%, rgba(255, 87, 51, 1) 100%);
					border: 1px solid rgba(255, 195, 0, 1);
					box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
					font-size: 24rpx;
					padding: 0 20rpx;
					line-height: 50rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
			.img{
				width: 450rpx;
				height: 140rpx;
				margin: 1rpx 150rpx;
			}
			.hader_tabbar{
				width: 750rpx;
				height: 80rpx;
				margin:50rpx 0;
				background: linear-gradient(90deg, rgba(255, 141, 26, 0) 0%, rgba(229, 229, 229, 0.4) 50%, rgba(255, 141, 26, 0) 100%);
				// /deep/.active{
				// 	width: 140rpx;
				// 	height: 80rpx;
				// 	background-color: transparent;
				// 	background:url('../../static/images/tab3.png');
				// 	background-size: 100% 100%;
				// }
			}
		}
		.mains{
			width: 734rpx;
			height: 1068rpx;
			margin: 0 auto;
			padding-top: 84rpx;
			// margin-bottom: 80rpx;
			background: url('../../static/images/mian1.png') no-repeat;
			background-size: 100%;
			// border: 1px solid black;
			.winningaprize{
				width: 460rpx;
				height: 50rpx;
				margin: 0 auto;
				text-align: center;
				white-space: pre-wrap;
				// border: 1px solid black;
				// line-height: 20rpx;
				overflow: hidden;
			}
			.ninegrid{
				width: 600rpx;
				height: 590rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				position: relative;
				.clickblock{
					width: 600rpx;
					height: 590rpx;
					// background-color: pink;
					position: absolute;
					top: 0;
					z-index: 99;
					display: flex;
					flex-wrap: wrap;
					.clickblockitem{
						width: 194rpx; 
						height: 194rpx;
						// background-color: #ccc;
						// border: 1px solid black;
					}
				}

			}
			.buttom{
				width: 450rpx;
				height: 120rpx;
				border-radius: 8px;
				background: url('../../static/images/按钮.png');
				background-size: 100% 100%;
				margin: 0 auto;
				margin-top: 54rpx;
				position: relative;
				.name{
					width: 450rpx;
					height: 120rpx;
					font-size: 44rpx;
					line-height: 94rpx;
					font-weight: 600;
					color: rgba(181, 50, 42, 1);
					text-align: center;
				}
				.text{
					width: 140rpx;
					height: 48rpx;
					background: url('../../static/images/白标.png');
					background-size: 100%;
					position: absolute;
					top: -20rpx;
					left: 400rpx;
					display: flex;
					.img{
						width: 40rpx;
						height: 40rpx;
						margin: 4rpx 0 0 26rpx;
					}
					.text1{
						width: 80rpx;
						height: 44rpx;
						font-size: 28rpx;
						line-height: 48rpx;
						color: rgba(204, 105, 6, 1);
						text-align: left;
					}
				}
			}
			.explain{
				width: 280rpx;
				height: 66rpx;
				border-radius: 20px;
				background: rgba(205, 42, 4, 1);
				margin: 0 auto;
				margin-top: 56rpx;
				font-size: 28rpx;
				line-height: 66rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
		// 用户协议
		.UserAgreement{
			width: 750rpx;
			height: 80rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			.title{
				width: 750rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #fff;
			}
			.skip{
				width: 750rpx;
				height: 40rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: rgba(82, 157, 242, 1);
				text-align: center;
			}
		}
		.CompanyLabeling{
			width: 600rpx;
			height: 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			margin: 0 auto;
			// border: 1px solid black;
		}
		// 中奖弹框
		.Winningpopup{
			width: 660rpx;
			height: 780rpx;
			background: linear-gradient(180deg, rgba(254, 249, 228, 1) 0%, rgba(255, 243, 212, 1) 100%);
			border-radius: 20rpx;
			position: relative;
			.treasureChest{
				width: 320rpx;
				height: 260rpx;
				position: absolute;
				top: -190rpx;
				left: 180rpx;
				// margin: -190rpx 0 0 180rpx;
				z-index: 99;
			}
			.plaque{
				width: 500rpx;
				height: 90rpx;
				margin: -4rpx 0 0 84rpx;
				z-index: 1;
			}
			.title{
				width: 600rpx;
				height: 100rpx;
				font-size: 40rpx;
				line-height: 100rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 1);
				text-align: center;
				margin: 0 auto;
			}
			.prize{
				width: 340rpx;
				height: 280rpx;
				margin: 0 0 0 150rpx;
			}
			.name{
				width: 580rpx;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 700;
				line-height: 40rpx;
				color: rgba(214, 47, 47, 1);
				text-align: center;
				// border: 1px solid black;
				margin: 0 auto;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box; /* 将容器设置为弹性盒子 */
				-webkit-line-clamp: 3; /* 显示的行数 */
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 50rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				margin: 60rpx 0 0 300rpx;
			}
		}
		// 金币不足
		.insufficientpopup{
			width: 720rpx;
			// height: 680rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20rpx;
			padding-bottom: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 115rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			.title{
				width: 500rpx;
				height: 40rpx;
				margin: 30rpx 0 0 20rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				// border: 1px solid black;
			}
			.product{
				width: 680rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				// border: 1px solid black;
				display: grid;
				grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
				gap: 10px; /* 网格间距 */
				.product_item {
					height: 80rpx;
					border-radius: 10rpx;
					background-color: rgba(240, 240, 240, 1);
					border: 1px solid rgba(240, 240, 240, 1);
					color: white;
					padding: 10px;
					text-align: center;
					font-size: 18px;
					.GoldCoins{
						height: 50rpx;
						display: flex;
						// border: 1px solid black;
						margin-top: -10rpx;
						.gold{
							width: 44rpx;
							height: 44rpx;
							margin-left: 20rpx;
						}
						.goldtext{
							width: 36px;
							height: 24px;
							font-size: 16px;
							line-height: 23.17px;
							color: rgba(44, 44, 44, 1);
						}
					}
					.money{
						height: 40rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(128, 128, 128, 1);	
						text-align: center;
					}
				}
				.active{
					background-color: rgba(255, 242, 242, 1);
					border: 1px solid rgba(250, 134, 17, 1);
				}
			}
			.payuse{
				width: 720rpx;
				margin-top: 30rpx;
				.payitem{
					width: 720rpx;
					height: 100rpx;
					border-radius: 6px;
					margin: 0 auto;
					background: rgba(242, 242, 242, 1);
					box-shadow: 0px 2px 4px  rgba(166, 166, 166, 0.25);
					.paypol{
						width: 200rpx;
						height: 50rpx;
						margin: 28rpx 30rpx;
					}
					.defa{
						width: 40rpx;
						height: 40rpx;
						margin: 10rpx 0 28rpx 370rpx;
					}
				}
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top:80rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom:-80rpx;
				left: 340rpx;
			}
		}
		// 规则
		.rulepopup{
			width: 660rpx;
			height: 760rpx;
			background: linear-gradient(180deg, rgba(254, 249, 228, 1) 0%, rgba(255, 243, 212, 1) 100%);
			border-radius: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 95rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			// 规则说明
			.scllow{
				width: 590rpx;
				height: 650rpx;
				// border: 1px solid black;
				margin: 0rpx 0 80rpx 40rpx;
				overflow: scroll;
				.RuleSubclass{
					width: 590rpx;
					font-size: 26rpx;
					color: rgba(56, 56, 56, 1);
					line-height: 70rpx;

				}
			}

			.title{
				width: 500rpx;
				height: 60rpx;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 auto;
				margin-top: 80rpx;
			}
			.imgs{
				width: 570rpx;
				height: 300rpx;
				margin: 45rpx;
				display: flex;
				.imgs_item{
					width: 200rpx;
					height: 200rpx;
					// border: 1px solid black;
					.img1{
						width: 170rpx;
						height: 140rpx;
						margin: 0 0 0 10rpx;
						// border: 1px solid black;
					}
					.text{
						width: 200rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 40rpx;
						color: rgba(214, 47, 47, 1);
						text-align: center;
					}
				}
				.img2{
					width: 76px;
					height: 20px;
					margin-top: 70rpx;
				}
			}
			.accept{
				width: 560rpx;
				height: 90rpx;
				opacity: 1;
				border-radius: 30px;
				background: rgba(232, 94, 63, 1);
				font-size: 32rpx;
				line-height: 90rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 30rpx;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 770rpx;
				left: 300rpx;
				// margin: 420rpx 0 0 300rpx;
			}
		}
		// 奖品详情弹框
		.DetailedPrizes{
			width: 660rpx;
			height: 720rpx;
			background: linear-gradient(180deg, rgba(254, 249, 228, 1) 0%, rgba(255, 243, 212, 1) 100%);
			border-radius: 20rpx;
			position: relative;
			.plaque{
				width: 500rpx;
				height: 80rpx;
				margin: 0rpx 0 0 95rpx;
				background: url('../../static/images/牌匾.png');
				background-size: 100% 100%;
				font-size: 36rpx;
				line-height:84rpx;
				color: rgba(181, 50, 42, 1);
				text-align: center;
				font-weight: 700;
			}
			.swiper{
				width: 640rpx;
				height: 590rpx;
				margin: 10rpx;
				// border: 1px solid black;
				.name{
					width: 640rpx;
					height: 80rpx;
					margin: 30rpx 0 0 0;
					font-size: 40rpx;
					font-weight: 700;
					line-height: 80rpx;
					color: rgba(0, 0, 0, 1);
					text-align: center;
				}
				.img{
					width: 300rpx;
					height: 300rpx;
					margin: 10rpx 0 0 170rpx;
				}
				.text{
					width: 590rpx;
					height: 80rpx;
					margin: 0 auto;
					margin-top: 0rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: rgba(56, 56, 56, 1);
					display: -webkit-box;
					-webkit-line-clamp: 2; /* 显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				.money{
					width: 570rpx;
					height: 50rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(166, 166, 166, 1);
					.span1{
						color: rgba(255, 87, 51, 1);
					}
				}
			}
			.zuo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
				background-color: rgba(56, 56, 56, 0.2);
				position: absolute;
				top: 300rpx;
				left: 20rpx;
				.img1{
					width: 28rpx;
					height: 45rpx;
					margin: 18rpx  0 0 24rpx;
				}
			}
			.you{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
				background-color: rgba(56, 56, 56, 0.2);
				position: absolute;
				top: 300rpx;
				left: 560rpx;
				.img1{
					width: 28rpx;
					height: 45rpx;
					margin: 18rpx  0 0 28rpx;
				}
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 730rpx;
				left: 300rpx;
				// margin: 420rpx 0 0 300rpx;
			}
		}
	}
</style>
